<template>
  <div id="app3">
    <header class="header">
      <div class="title">
        <img src="../../assets/images/01_11.png" alt class="img_zuo" @click="back" />
        <div>三年行动</div>
      </div>
    </header>
    <div class="main">

      <div class="box">
        <div class="item">
          <div class="item-value">[{{serialNumber}}]{{xueyi}}</div>
        </div>
      </div>

      <div class="box">
        <div class="item item-line">
          <div class="item-value">主要任务</div>
        </div>
        <div class="item">
          <div class="item-value">
         {{title}}
          </div>
        </div>
      </div>

      <div class="box">
        <div class="item item-line">
          <div class="item-value">工作措施</div>
        </div>
        <div class="item">
          <div class="item-value">
            {{workMeasures}}
          </div>
        </div>
      </div>

      <div class="box">
        <div class="item item-line">
          <div class="item-value">{{responsibleDepartment}}</div>
        </div>
        <div class="item item-line">
          <div class="item-value">完成时限-{{endTime}}</div>
        </div>
        <div class="item item-line" @click="ls()">
          <div class="item-value">落实状态-{{zt}}({{commitCounts+detailCounts}})</div>
        </div>
        <div class="item" v-show="state==2">
          <div class="item-value">
            <div class="item-value-left">落实日期</div>
            <div class="item-value-right">
              <div class="lsrq">-{{workable}}</div>

            </div>
          </div>
        </div>
      </div>

    </div>
    <Tabbar></Tabbar>
  </div>
</template>
<script>
import { Dialog } from "vant";
import utils from "../../assets/js/utils.js"
import Tabbar from "../tabbar.vue";
import terminal from "../../assets/js/terminal";
export default {
   components: {
    Tabbar
  },
  data() {
    return {
      terminal: false,
      liebiaoid:'',
      xueyi:'',
      serialNumber:'',
      responsibleDepartment:'',
      workMeasures:'',
      title:'',
      endTime:'',
      workable:'',
      zt:'',
      state:'',
      detailCounts:'',
      commitCounts:''
    };
  },

  methods: {
    back(){//返回
    //  var lujin=localStorage.getItem("snxdlu")? JSON.parse(localStorage.getItem("snxdlu")) : {};
    //  if(lujin.snxdlj=="/snxd_sclist"){
    //      this.$router.push('/snxd_sclist');
    //  }else if(lujin.snxdlj=="/snxd_list"){
    //        this.$router.push('/snxd_list');
    //  }

        this.$router.back()
    },
    ls(){
  this.$router.push('/snxd_ls');
  // sessionStorage.setItem("guanlian", 1);
    },
    chaxun(){
 this.axios
        .get(
          `${this.$global_msg.Url.host}/ThreeYearsController/selectForDetailsById?logId=${this.liebiaoid}`
        )
        .then((res) => {
          console.log('详情',res)
          if(res.data.code==200){
            this.xueyi=res.data.rows[0].name
              this.serialNumber=res.data.rows[0].serialNumber
                this.responsibleDepartment=res.data.rows[0].responsibleDepartment
                  this.workMeasures=res.data.rows[0].workMeasures
                  this.title=res.data.rows[0].title
                    this.endTime=res.data.rows[0].endTime
                    this.commitCounts=res.data.rows[0].commitCounts
                       this.detailCounts=res.data.rows[0].detailCounts
                  
                      this.state=res.data.rows[0].state
                      if(res.data.rows[0].state==2){
                        this.zt="已落实"
                      }else if(res.data.rows[0].state==1){
                        this.zt="已超期"
                      }else if(res.data.rows[0].state==0){
                        this.zt="未落实"
                      }
                       this.workable=res.data.rows[1].workable

          }
        })
    },

    plusReady: function() {}
  },
  beforeCreate() {
    document.addEventListener("plusready", this.plusReady, false);
  },
  mounted() {

    var _this = this;

    this.terminal = terminal.terminals().android;
    this.liebiaoid=localStorage.getItem('logid')
    this.chaxun()
    //物理返回
    // window.addEventListener("popstate", function(){
    //   _this.back();
    // }, false);
  },
  created() {}
};
</script>
<style scoped>
  #app3{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
  }
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    z-index: 20;
    font-size: 0.388888rem;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }
  .btn-add{
    position: absolute;
    right: 0.37037rem;
    font-size: 0.388888rem;
    bottom: 0.462962rem;
  }

  .main {
    box-sizing: border-box;
    background: #f7f7f9;
    flex: 1;
    width: 100%;
    overflow: scroll;
    padding-bottom: 2rem;
  }

  /* 圆角 */
  .radius-b{
    border-radius: 0.222222rem;
  }
  .radius-m{
    border-radius: 0.166666rem;
  }
  .radius-s{
    border-radius: 0.111111rem;
  }

  /* 表单 */
  .box{
    border-radius: 0.222222rem;
    margin-top: 0.12037rem;
    background-color: #FFFFFF;
  }
  .item{
    width: auto;
    padding: 0.37037rem 0;
    display: flex;
    align-items: center;
    margin-left: 0.185185rem;
    margin-right: 0.185185rem;
    color: #000000;
    font-size: 0.388888rem;
  }
  .item-value{
    margin-left: 0.37037rem;
    margin-right: 0.37037rem;
    display: flex;
  }
  .item-line{
    border-bottom: 1px #DDDDDD solid;
  }
  .item-value-left{
    height: 100%;
    display: flex;
    align-items: flex-start;
  }
  .item-value-right{
    flex: 1;
  }
  .lsrq{
    width: 100%;
    display: flex;
    justify-content: flex-start;
  }

</style>
